<template>
    <div>
        <navigationBar :bgType="3" :backType="2" navigationTitle="车费明细" />
        <view class="search flex just-between align-center f-26">
            <view class="search-input flex align-center">
                <image
                    class="search-img"
                    src="/static/static/technician/joinUs/search.png"
                    mode="scaleToFill"
                />
                <view class="search-line"></view>
                <input
                    style="flex: 1"
                    type="text"
                    v-model="order_sn"
                    placeholder="请输入订单号搜索"
                    @blur="onBlur"
                />
            </view>
            <image
                @click="visible = !visible"
                class="search-date"
                src="/static/static/technician/joinUs/date.png"
                mode="scaleToFill"
            />
        </view>
        <view class="content">
            <view
                class="card f-28"
                v-for="({ orders }, item, index) in list"
                :key="index"
            >
                <view class="item">
                    <view class="item-title flex just-between align-center">
                        <text class="item-order_sn">
                            订单号：{{ orders.order_sn }}
                        </text>
                        <text class="item-city">{{ datas.area_name }}</text>
                    </view>
                    <view class="item-location line">
                        <view class="item-start flex align-center just-between">
                            <view class="item-start_icon">起</view>
                            <text class="item-start_text">
                                {{ orders.trip_start_address }}
                            </text>
                        </view>
                        <view class="item-end flex align-center just-between">
                            <view class="item-end_icon">终</view>
                            <text class="item-end_text">
                                {{ orders.trip_end_address }}
                            </text>
                        </view>
                        <view class="item-time flex align-center just-between">
                            <view class="innerBox"></view>
                            <view
                                class="flex align-center just-between timeBox"
                            >
                                <view class="item-time_start flex column">
                                    <text class="item-time_text">出发时间</text>
                                    <text class="item-time_time">
                                        {{ orders.serout_time_text }}
                                    </text>
                                </view>
                                <view class="item-time_end flex column">
                                    <text class="item-time_text">到达时间</text>
                                    <text class="item-time_time">
                                        {{ orders.arrive_time_text }}
                                    </text>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view class="item-sub flex just-between align-center">
                        <text class="item-sub_text">金额(往返车费)</text>
                        <text class="item-sub_price">
                            {{ orders.car_price }}元
                        </text>
                    </view>
                </view>
            </view>
            <emptyData v-if="list.length == 0" :text="'暂无数据'"></emptyData>
        </view>
        <view class="mask" @click="visible = false" v-if="visible"></view>
        <view class="picker" v-if="visible">
            <view class="picker-btn">
                <text class="cancel" @click="cancel">取消</text>
                <text class="confirm" @click="confirm">确认</text>
            </view>
            <picker-view
                :indicator-style="indicatorStyle"
                :value="value"
                @change="bindChange"
                class="picker-view"
            >
                <picker-view-column>
                    <view
                        class="items"
                        v-for="(item, index) in years"
                        :key="index"
                        >{{ item }}年</view
                    >
                </picker-view-column>
                <picker-view-column>
                    <view
                        class="items"
                        v-for="(item, index) in months"
                        :key="index"
                        >{{ item }}月</view
                    >
                </picker-view-column>
                <picker-view-column>
                    <view
                        class="items"
                        v-for="(item, index) in days"
                        :key="index"
                        >{{ item }}日</view
                    >
                </picker-view-column>
                <picker-view-column>
                    <view class="items">-</view>
                </picker-view-column>
                <picker-view-column>
                    <view
                        class="items"
                        v-for="(item, index) in years1"
                        :key="index"
                        >{{ item }}年</view
                    >
                </picker-view-column>
                <picker-view-column>
                    <view
                        class="items"
                        v-for="(item, index) in months1"
                        :key="index"
                        >{{ item }}月</view
                    >
                </picker-view-column>
                <picker-view-column>
                    <view
                        class="items"
                        v-for="(item, index) in days1"
                        :key="index"
                        >{{ item }}日</view
                    >
                </picker-view-column>
            </picker-view>
        </view>
    </div>
</template>
<script>
import { getTechnicianEarnings } from "@/API/API/earnings.js";
export default {
    data() {
        const date = new Date();
        const years = [];
        const year = date.getFullYear();
        const months = [];
        const month = date.getMonth() + 1;
        const days = [];
        const day = date.getDate();
        for (let i = 1990; i <= date.getFullYear(); i++) {
            years.push(i);
        }
        for (let i = 1; i <= 12; i++) {
            months.push(i);
        }
        for (let i = 1; i <= 31; i++) {
            days.push(i);
        }
        const years1 = [];
        const year1 = date.getFullYear();
        const months1 = [];
        const month1 = date.getMonth() + 1;
        const days1 = [];
        const day1 = date.getDate();
        for (let i = 1990; i <= date.getFullYear(); i++) {
            years1.push(i);
        }
        for (let i = 1; i <= 12; i++) {
            months1.push(i);
        }
        for (let i = 1; i <= 31; i++) {
            days1.push(i);
        }
        return {
            datas: {},
            list: [],
            startDate: "",
            endDate: "",
            date: null,
            endTime: "",
            page: 1,
            showIndex: null,
            searchTime: "",
            years,
            year,
            months,
            month,
            days,
            day,
            years1,
            year1,
            months1,
            month1,
            days1,
            day1,
            visible: false,
            indicatorStyle: `height: 50px;`,
            value: [9999, month - 1, day - 1, 0, 9999, month1 - 1, day1 - 1],
            // over
            order_sn: "",
            page: 1,
            list: [],
            area_name: "",
            searchtime: "",
            datas: {},
        };
    },

    onLoad() {
        this.getList();
    },
    // 加载
    onReachBottom() {
        if (this.page < this.datas.list.last_page) {
            this.page++;
            this.getList();
        }
    },

    onPullDownRefresh() {
        this.page = 1;
        this.list = [];
        this.getList();
    },
    methods: {
        // 获取列表
        getList() {
            getTechnicianEarnings({
                type: 2,
                page: this.page,
                searchtime: this.searchTime,
                order_sn: this.order_sn,
            }).then((res) => {
                this.list.push(...res.data.list.data);
                this.datas = res.data;
                this.searchTime = "";
            });
        }, // 搜索
        onBlur() {
            if (this.order_sn != "" && this.list.length > 0) {
                this.page = 1;
                this.list = [];
                this.getList();
                this.order_sn = "";
            } else if (this.order_sn === "" && this.list.length === 0) {
                this.page = 1;
                this.list = [];
                this.getList();
            }
        },
        // 确认
        confirm() {
            this.visible = false;
            this.searchTime = `${this.year}-${this.month}-${this.day} - ${this.year1}-${this.month1}-${this.day1}`;
            this.page = 1;
            this.list = [];
            this.getList();
        },
        // 取消
        cancel() {
            this.visible = false;
        },
        // 日期
        bindChange: function (e) {
            const val = e.detail.value;
            this.year = this.years[val[0]];
            this.month = this.months[val[1]];
            this.day = this.days[val[2]];
            this.year1 = this.years1[val[4]];
            this.month1 = this.months1[val[5]];
            this.day1 = this.days1[val[6]];
            let day30 = [
                1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18,
                19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30,
            ];
            let day31 = [
                1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18,
                19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31,
            ];
            let day28 = [
                1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18,
                19, 20, 21, 22, 23, 24, 25, 26, 27, 28,
            ];
            if ([4, 6, 9, 11].includes(this.months[val[1]])) {
                this.days = day30;
            }
            if ([4, 6, 9, 11].includes(this.months1[val[5]])) {
                this.days1 = day30;
            }
            if ([2].includes(this.months[val[1]])) {
                this.days = day28;
            }
            if ([2].includes(this.months1[val[5]])) {
                this.days1 = day28;
            }
            if ([1, 3, 5, 7, 8, 10, 12].includes(this.months[val[1]])) {
                this.days = day31;
            }
            if ([1, 3, 5, 7, 8, 10, 12].includes(this.months1[val[5]])) {
                this.days1 = day31;
            }
            if (this.year1 < this.year) {
                this.value = [
                    val[0],
                    val[1],
                    val[2],
                    0,
                    val[0],
                    val[5],
                    val[6],
                ];
                this.year1 = this.years1[val[0]];
            } else if (this.month1 < this.month) {
                this.value = [
                    val[0],
                    val[1],
                    val[2],
                    0,
                    val[4],
                    val[1],
                    val[6],
                ];
                this.month1 = this.months1[val[1]];
            } else if (this.day1 < this.day) {
                this.value = [
                    val[0],
                    val[1],
                    val[2],
                    0,
                    val[4],
                    val[5],
                    val[2],
                ];
                this.day1 = this.days1[val[2]];
            }
        },
    },
};
</script>
<style lang="scss" scoped>
.search {
    width: 100%;
    height: 100%;
    padding: 20rpx 20rpx;
    box-sizing: border-box;
    background: white;
    position: sticky;
    top: 0px;
    &-input {
        width: 82%;
        padding: 10rpx;
        background: #f6f6f6;
        border-radius: 20rpx;
    }
    &-img {
        width: 25.15rpx;
        height: 23.6rpx;
        padding-left: 10rpx;
    }
    &-line {
        width: 2rpx;
        height: 34rpx;
        background: #3f3f3f;
        margin: 0 15rpx;
    }
    &-date {
        width: 56rpx;
        height: 56rpx;
    }
}
.content {
    padding: 0 20rpx 20rpx 20rpx;
    box-sizing: border-box;
    padding-bottom: env(safe-area-inset-bottom);
    .item {
        padding: 0 20rpx;
        box-sizing: border-box;
        &-title {
            padding: 30rpx 0;
        }
        &-city {
            color: #606dce;
        }
        &-location {
            padding: 20rpx 0;
        }
        &-start,
        &-end {
            padding: 20rpx 0;
        }
        &-start_icon {
            background: #f87918;
            color: white;
            border-radius: 50%;
            width: 52rpx;
            height: 52rpx;
            line-height: 52rpx;
            text-align: center;
            margin: 0 20rpx;
        }
        &-end_icon {
            background: $theme-color;
            color: white;
            border-radius: 50%;
            width: 52rpx;
            height: 52rpx;
            line-height: 52rpx;
            text-align: center;
            margin: 0 20rpx;
        }
        &-start_text,
        &-end_text {
            flex: 1;
            line-height: 1.2;
        }
        &-time {
            padding: 10rpx 0;
        }
        &-time_time {
            color: #999999;
            padding-top: 10rpx;
        }
        &-sub {
            padding: 25rpx 0;
        }
        &-sub_price {
            color: #e13221;
        }
    }
}
.card {
    width: 100%;
    background: #fff;
    border-radius: 20rpx;
    margin: 20rpx auto 0 auto;
    box-sizing: border-box;
}
.picker {
    border-top: 1rpx solid #eeeeee;
    box-shadow: 0 0 10rpx #eeeeee;
    transition: all 0.3s;
    width: 750rpx;
    height: 600rpx;
    z-index: 999;
    .picker-btn {
        width: 100%;
        padding: 20rpx 30rpx 20rpx 30rpx;
        box-sizing: border-box;
        background: white;
        color: #000;
        font-size: 28rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1rpx solid #f5f5f5;

        .cancel {
            color: #999999;
        }
        .confirm {
            color: #00ce45;
        }
    }
    .picker-view {
        width: 100%;
        height: 100%;
        padding: 0 20rpx;
        box-sizing: border-box;
    }
    margin-top: 20rpx;
    position: fixed;
    left: 0;
    bottom: 0;
    background: white;
    color: #000;
}
.items {
    line-height: 100rpx;
    text-align: center;
}
/deep/.uni-input-wrapper {
    font-size: 26rpx;
}
.line {
    border-top: 2rpx solid #ececec;
    border-bottom: 2rpx solid #ececec;
}
.innerBox {
    width: 52rpx;
    height: 52rpx;
    margin: 0 20rpx;
    opacity: 0;
}
.timeBox {
    flex: 1;
}
.noData {
    text-align: center;
    color: #999999;
    padding: 20rpx 0;
}
.mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
}
</style>